<template>
  <div>
    <el-dialog :title="formtype==1?'新增覆盖职员':'编辑覆盖职员'" @close='cancel' width='560px' :visible.sync="dialogFormVisible">
      <div class="tree_body EditCMBox">
        <el-tree
          :data="data2"
          show-checkbox
          ref="tree2"
          node-key="Id"
          @check-change="checkchange"
          default-expand-all
          :default-checked-keys='treedata'
          :props="defaultProps">
        </el-tree>
      </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="commit">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
var that
  export default {
    data() {
      return {
        dialogFormVisible:false,
        formtype:1,
        formLabelWidth:'80px',
        defaultProps: {
          children: 'Children',
          label: 'Name'
        },
        data2:[],
        treedata:[],
        form:{
          name:'',
          region:'',
        }
      }
    },
    created() {
      // this.getlistdata()
      that = this;
    },
    watch: {
    },
    methods: {
      checkchange(data,e,q){
        console.log(data,e,q);
      },
      cancel(){
        this.data2 = [];
        this.dialogFormVisible = false
      },
      setkeystwo(arr){
        if (arr.length) {
          setTimeout(()=>{
            that.$refs.tree2.setCheckedKeys(arr);
          },10)
        }
      },
      commit(){
        // this.dialogFormVisible=false
        let data = this.$refs.tree2.getCheckedKeys()
        let dataarr = [];
        if (data.length) {
          data.forEach((item,index,arr) => {
            if (item) {
              dataarr.push(item);
            }
          });
        }
        this.$parent.setkey(dataarr);
        this.cancel();
        console.log(dataarr);
      },
    },
  }
</script>

<style lang="less" scoped>
.tree_body{
  max-height: 50vh;
  overflow-y: scroll;
}
</style>